<template>
	<div class="ui-colors">
		<div class="ui-colors-cell" v-for="(item, index) in colors" :key="index" :class="{checked: item == value}" @click="handleClick(item)">
			<div class="ui-colors-cell__box">
				<div :style="{backgroundColor: item}"></div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'selectColors',
	props: {
		value: {
			type: String,
			default: ''
		},
		colors: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	methods: {
		handleClick(color) {
			this.$emit('input', color);
			this.$emit('change', color);
		}
	}
}
</script>

<style lang="less">
.ui-colors {
	font-size: 0;
	&-cell {
		display: inline-block;
		margin-right: 20px;
		padding: 5px;
		width: 40px;
		height: 40px;
		vertical-align: top;
		&__box {
			padding: 1px;
			width: 30px;
			height: 30px;
			border: 1px solid #e1e1e1;
			background-color: #fff;
			cursor: pointer;
			> div {
				width: 100%;
				height: 100%;
			}
		}
	}
	&-cell:last-child {
		margin-right: 0px;
	}
	&-cell.checked {
		padding: 4px;
		border: 1px solid #427eb7;
	}
}
</style>